<template>
  <div class="container">
    <div class="top">
      <ps-header :title="company" :showDecoration5="false">
        <template #header>
          <select name="" id="" class="chart-select">
            <option :value="999">全部</option>
            <option v-for="item in options" :key="item.Udef1" :value="item.Udef1">
              {{ item.Udef1 }}
            </option>
          </select>
        </template>
      </ps-header>

      <div class="tools">
        <div v-if="!isFullscreen" class="left">
          <el-button @click="show(false, 999, 0)" type="primary" :class="{ ps_btn_active: active === 999 }">
            全部
          </el-button>
          <el-button
            v-for="(item, index) in options"
            :key="item.Udef1"
            type="primary"
            @click="show(item, index, 0)"
            :class="{ ps_btn_active: index === active }"
          >
            {{ item.Udef1 }}
          </el-button>
        </div>
        <div class="right">
          <span>本页共{{ total }}条数据</span>
        </div>
      </div>
    </div>

    <ps-borderbox6 class="content">
      <div style="overflow: hidden" :style="{ height: machineList.length > 0 ? '67%' : '100%' }">
        <dv-scroll-board :config="config" :key="key"></dv-scroll-board>
      </div>
      <div style="height: 33%" v-if="machineList.length > 0">
        <el-carousel direction="vertical" :autoplay="true" :interval="15 * 1000">
          <el-carousel-item v-for="machine in machineList" :key="machine">
            <div class="ps_machine">
              <div
                class="ps_machine_item"
                v-for="(item, index) in machine"
                :key="index"
                :class="{
                  red: item.zt === '未开工',
                  green: item.zt === '生产中' && !item.gxmc.includes('调机'),
                  blue: item.gxmc.includes('调机')
                }"
              >
                <div class="jtbh">{{ item.jtbh }}</div>
                <div>{{ item.gxmc }}</div>
                <div>{{ item.sfm }}</div>
                <div>{{ item.jtmc }}</div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </ps-borderbox6>
  </div>
</template>

<script setup>
import { getdscdlkbNow, getgxdlxxNow } from '@/api/processClassNow.js'
import { ref, onMounted, computed, reactive, nextTick, onUnmounted, inject } from 'vue'
import { formatHeaderData, generateTwoDimensionalArray } from '@/utils/globalMethod'
import { userStore } from '@/pinia/user'
import { getAllMachine } from '@/api/pannel/machinePannel.js'
import { formatMoney } from '@/utils/globalMethod'

const active = ref(999)
const options = ref([])
const key = ref(1)
const user = userStore().profile
const isFullscreen = inject('isFullScreen')
const total = ref()
const machineList = ref([])
const socket = inject('socket')
const local = ref({ Udef1: '', index: null })

const config = reactive({
  data: [],
  header: ['工单单号', '产品名称', '规格型号', '工序', '工单总数', '累计良品', '待生产数量', '等待时间', '开工时间'],
  headerBGC: 'rgba(0,0,0,0)',
  oddRowBGC: 'rgba(0,0,0,0)',
  evenRowBGC: 'rgba(0,0,0,0)',
  align: ['center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center', 'center'],
  columnWidth: [70, 180, 300, 400, 120, 120, 120, 140, 140, 120],
  rowNum: 15,
  index: true,
  carousel: 'page',
  waitTime: 1000 * 20
})

// 动态控制标题内容
const company = computed({
  get() {
    const _company = user.company

    const sub = active.value === 999 ? '' : `-${options.value[active.value].Udef1}`

    return _company + sub
  }
})

/**
 * @description: 切换工序信息
 * @param {*} item：目前选中的工序
 * @param {*} index：当前选中的工序下标
 * @param {*} mode：切换模式 手动/自动
 * @return {*}
 */

const show = async (item, index, mode) => {
  let params = { gx: '', lineID: '' }
  params.lineID = params.gx = !item ? '' : item.Udef1

  if (mode === 0) {
    // 手动切换
    local.value.Udef1 = !item ? '' : item.Udef1
    local.value.index = index
  }

  await updateData(params.lineID)
  await updateMachine(params.lineID)

  active.value = index
}

/**
 * @description: 获取工单详情
 * @param {*} gx：工序编号
 * @return {*}
 */
const updateData = async gx => {
  const { data, total: _total } = await getdscdlkbNow({ gx })
  config.data = data.map(item => {
    if (item.gdzk === 2) {
      for (let k in item) {
        item[k] = formatHeaderData(item[k], 'red')
      }
    } else if (item.gdzk === 1) {
      for (let k in item) {
        if (k === 'dgs' && item[k] > 10) {
          item.dgs = formatHeaderData(item['dgs'], 'red')
        } else {
          item[k] = formatHeaderData(item[k], '#0084ff')
        }
      }
    } else {
      for (let k in item) {
        if (k === 'dgs' && item[k] > 10) {
          item.dgs = formatHeaderData(item['dgs'], 'red')
        }
      }
    }

    return [
      item.MkNo,
      item.ProdName,
      item.ProdSize,
      item.OrderID,
      (item.Quantity = formatMoney(null, item.Quantity)),
      (item.GoodQty = formatMoney(null, item.GoodQty)),
      (item.dscsl = formatMoney(null, item.dscsl)),
      item.dgs,
      item.kaigongSJ
    ]
  })

  total.value = _total
}

/**
 * @description: 更新机台信息
 * @param {*} lineID：生产工序
 * @return {*}
 */
const updateMachine = async lineID => {
  let { machines } = await getAllMachine({ lineID })
  machines = machines.map(item => {
    if (item.jtmc.length > 5) {
      item.jtmc = item.jtmc.substring(0, 6) + '...'
    }
    return item
  })
  machineList.value = generateTwoDimensionalArray(machines)
}

// 获取工序 =>  查询所有数据
const info = async () => {
  const { data } = await getgxdlxxNow()
  options.value = data
  show(false, 999, 0)
}

onMounted(() => {
  window.addEventListener('resize', () => {
    nextTick(() => {
      const status = !document.fullscreenElement ? false : true

      if (status) {
        config.columnWidth = [70, 180, 300, 400, 120, 120, 120, 140, 140]
      } else {
        config.columnWidth = [70, 180, 300, 400, 120, 120, 120, 140, 140, 120]
      }
      key.value++
    })
  })
  info()

  socket.receiveMessage('report-system-update', async data => {
    await show(local.value, local.value.index, 1)
  })
})

onUnmounted(() => {
  socket.removeAllListeners('report-system-update')
})
</script>

<style scoped lang="scss">
.container {
  height: 100%;
  background-image: url('../../assets/image/visualization-bg.png');
  display: flex;
  flex-direction: column;

  .top {
    .tools {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .left {
        flex: 1;

        :deep(.el-button:hover) {
          background-color: #ffa500;
          border-color: #ffa500;
        }
      }

      .right {
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        margin-left: auto;
        margin-right: 30px;
      }
    }
  }

  .content {
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
}

:deep(.dv-scroll-board .rows .row-item) {
  font-size: 22px;
  letter-spacing: 0px;
}

:deep(.dv-scroll-board .header .header-item) {
  font-size: 22px;
  letter-spacing: 0px;
}
</style>
